﻿@mixin steps-size($size) {
    font-size: $size;
    min-height: $size*2;

    .e-step-item {
        &:not(:first-child)::before {
            height: $steps-divider-height;
            width: 100%;
            bottom: 0;
            left: -50%;
            top: #{$size};
        }

        .e-step-item-marker {
            height: $size * 2;
            width: $size * 2;
            position: absolute;
            left: calc(50% - #{$size});

            .icon {
                * {
                    font-size: $size;
                }
            }
        }

        .e-step-item-details {
            margin-top: $size * 2;
            margin-left: .5em;
            margin-right: .5em;
            padding-top: .2em;

            .e-step-item-title {
                font-size: $size * 1.2;
                font-weight: $weight-semibold;
            }
        }
    }
}

.e-steps {
    @include block;
    display: flex;
    flex-wrap: wrap;

    .e-step-item {
        margin-top: 0;
        position: relative;
        flex-grow: 1;
        flex-basis: 0;

        &:not(:first-child) {
            flex-basis: 1em;
            flex-grow: 1;
            flex-shrink: 1;

            &::before {
                // This will contain the horizontal or vertical divider
                content: " ";
                display: block;
                position: absolute;
            }
        }

        &::before {
            background: linear-gradient(to left, $steps-default-color 50%, $steps-active-color 50%);
            background-size: 200% 100%;
            background-position: right bottom;

            .e-step-item-marker {
                color: $white;
            }
        }

        &.e-step-item-completed {
            &::before {
                background-position: left bottom;
            }

            .e-step-item-marker {
                color: $white;
                background-color: $steps-completed-color;
            }
        }

        &.e-step-item-active {
            &::before {
                background-position: left bottom;
            }


            &.e-step-item-completed .e-step-item-marker,
            .e-step-item-marker {
                background-color: $steps-active-color;
                /*border-color: $steps-active-color;*/
                color: $white;
            }
        }

        .e-step-item-marker {
            align-items: center;
            display: flex;
            border-radius: 50%;
            font-weight: $weight-bold;
            justify-content: center;
            background: $steps-marker-default-color;
            color: $white;
            border: $steps-marker-default-border;
            z-index: 1;
        }

        .e-step-item-details {
            text-align: center;
        }

        @each $name, $value in $theme-colors {
            $color: $value;
            $color-invert: color-yiq($value);

            &.e-step-item-#{$name} {
                &::before {
                    background: linear-gradient(to left, $steps-default-color 50%, $color 50%);
                    background-size: 200% 100%;
                    background-position: right bottom;
                }

                .e-step-item-marker {
                    background-color: $color;
                    /*border-color: $color;*/
                    color: $white;
                }

                &.e-step-item-completed {
                    &::before {
                        background-position: left bottom;
                    }

                    .e-step-item-marker {
                        background-color: $color;
                        /*border-color: $color;*/
                        color: $white;
                    }
                }

                &.e-step-item-active {
                    &::before {
                        background-position: left bottom;
                    }

                    &.e-step-item-completed .e-step-item-marker,
                    .e-step-item-marker {
                        background-color: $steps-active-color;
                        border-color: $steps-active-color;
                        color: $white;
                    }
                    /*.step-marker {
                        background-color: $white;
                        border-color: $color;
                        color: $color;
                    }*/
                }
            }
        }
    }

    .e-steps-content {
        align-items: stretch;
        flex-basis: 100%;
        margin: 1rem 0;

        .e-step-content {
            display: none;

            &.e-step-item-active {
                display: block;
            }
        }
    }

    .e-steps-actions {
        display: flex;
        align-items: stretch;
        flex-basis: 100%;

        .e-steps-action {
            display: flex;
            flex-basis: 0;
            flex-grow: 1;
            margin: .5rem;
            justify-content: center;
            align-items: center;
        }
    }

    &.e-steps-animated {
        .e-step-item {
            &::before {
                transition: all 2s ease;
            }

            .e-step-item-marker {
                transition: all 0s ease;
                transition-delay: 1.5s;
            }
        }
    }

    @include steps-size($size-normal);
    /* &.e-steps-small {
        @include steps-size($size-small);
    }*/
    /*&.e-steps-medium {
        @include steps-size($size-medium);
    }

    &.e-steps-large {
        @include steps-size($size-large);
    }*/
}
